﻿<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
<link rel="shortcut icon" href="img/ic.png">
    <title>展示-实时成绩</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/Exhibition.css"/>
	<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1400px)" href="css/Exhibition1.css"/>

    <!-- Morris Charts CSS -->
    <link href="css/plugins/morris.css" rel="stylesheet">
	<link href="nuget/content/content/toastr.css" rel="stylesheet" type="text/css"/>
    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<!-- tab table-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
		<script src="js/cdn/html5shiv-3.7.0.js"></script>
		<script src="js/cdn/respond-1.4.2.min.js"></script>
    <![endif]-->

	<link rel="stylesheet" href="css/cdn/dataTables.bootstrap.css">
	<link rel="stylesheet" href="css/cdn/font_i0327076nave7b9.css">
    <link rel="stylesheet" type="text/css" href="css/datatable.css"/>
    <style type="text/css">
    	#stup{
    		float: right;
    		color: red;
    		font-size: 16px;
    		font-weight: 600;
    		position: absolute;
			top: 10px;
			right: 30px;
    	}
    	#left_select{
    		float: left;
    		position: absolute;
			top: 5px;
			left: 30px;
    	}
    	select{
    		width: 90px;
    		height: 32px;
    		line-height: 32px;
    		border-radius: 8px;
    		font-size: 14px;
    		background: #000000;
    		color: #12DBCD;
    	}
		.gz_animate{
			z-index: 100;
			position: absolute;
			width: 224px;
			left: 50%;
			margin-left: -112px;


			/*padding: 10px;*/
			line-height: 50px;
			text-align: center;
			font-size: 16px;
			color: #fff;

			height: 0px;
			overflow: hidden;

			background-color: #000;
			opacity: .5;
		}
		.anchorBL{
			display:none;
		}
		.modal-dialog {
		    width: 600px;
		    /*margin: 150px auto;*/
		    margin: 150px 0 150px 215px;
		}
		.modal-body {
		    position: relative;
		    padding: 15px 0px;
		    
		}
		#addform{
			background-color: rgba(14,16,16,0.8);
		}
		.control-label{
			width: 350px;
			font-size: 18px;
		}
		.form-group{
			text-align: center;
			color: #04F6FF;
			font-size: 20px;
			font-weight: 600;
		}
		#chang,#lu,#time,#t,#times,#zongf{
			padding-left: 20px;
			color: red;
			font-size: 20px;
		}
		.fen{
			color: red;
		}
    </style>
</head>

<body style="overflow-y:visible;">
    <div id="bg">
        <div id="page-wrapper" class="container-fluid">
                <div class="row" style="height: 97%;padding-top: 0px !important;">
                	<div class="panel h100" style="padding-top: 0px !important;">
                        <div class="panel-heading" style="height: 10%;padding-top: 0px!important;"><!--ding-->
							<div style="height: 100%;display: flex;justify-content:center; align-items: center">
                        		<div class="nei" style="" v-cloak>
									<span class="biao" style="margin-right: 5rem;">{{dataObj.teamName}}</span>来自&nbsp;&nbsp;{{dataObj.teamOrganization}}&nbsp;&nbsp;&nbsp;&nbsp;联系人&nbsp;&nbsp;{{dataObj.teamLeader}}&nbsp;&nbsp;&nbsp;&nbsp;裁判&nbsp;&nbsp;{{dataObj.refereeName}}
								</div>
							</div>
                        </div>
                        <div class="panel-body" style="height:90%;padding-top: 0px!important;">
                        	<div class="col-lg-9 h100">
                        		<div class="panel panel-default border h100">
		                            <div class="panel-heading guzhan">
		                            	<div id="left_select">
		                            		<select v-model="name" @change="drawLine()" v-cloak>
											  <option v-for="option in options" v-bind:value="option.value" >
											    {{ option.text }}
											  </option>
											</select>
		                            	</div>
		                                <h3 class="panel-title center colors " style="font-size: 20px;">比赛实况</h3><img id="stup"/>
		                            </div>
		                            <div class="panel-body all" style="padding: 0px 15px !important;">
										<div style="position: relative;">
											<div class="gz_animate" id="animate">
												<img id="anim_show" alt="">
											</div>
										</div>
		                                <div id="allmap"></div>
		                            </div>
		                            
		                        </div>
		                        
		                        
		                    </div>
		                    <div class="col-lg-3 h100">
		                        <div class="panel panel-default border1">
		                            <div class="panel-heading" style="padding-bottom: 0px !important;">
		                                <h3 class="panel-title center colors" style="position: relative;font-size: 20px;">
											实时成绩
											<span style="position: absolute;right: 5px;bottom: 0px;font-size: 16px;"id="btn_btn" type="button" data-toggle="modal" data-target="#addScene">
												得<span id="sscj_zdf" style="color: red">0</span>分
											</span>
										</h3>
		                            </div>
		                            <div class="panel-body" style="padding: 0px 15px!important;">
		                                <div class="table">
		                                    <table id="realTime" class="display" width="100%"></table>
		                                </div>
		                            </div>
		                        </div>
		                         <div class="panel panel-default border1">
		                            <div class="panel-heading" style="padding-bottom: 0px !important;">
		                                <h3 class="panel-title center colors" style="position: relative;font-size: 20px;">
											违规信息
											<span style="position: absolute;right: 5px;bottom: 0px;font-size: 16px;">
												扣<span id="wgxx_zkf" style="color: red">0</span>分
											</span>
										</h3>
		                            </div>
		                            <div class="panel-body" style="padding: 0px 15px!important;">
		                                <div class="table">
		                                	<table id="Illegal" class="display" width="100%"></table>
		                                </div>
		                            </div>
		                        </div>
		                    </div>
		                    <!-- 新增 -->
							<div class="modal fade" id="addScene" tabindex="-1"  data-backdrop="static" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-body">
										<div class="modal-body">
											<div class="panel-body">
												<form class="form-horizontal" id="addform" method="get">
													<div class="text-center" style="color:#fff;line-height: 34px; margin-bottom: 5px; font-size: 16px;background-image: url(img/block.png); background-color: rgba(14,16,16,0.8);"><b>比赛成绩</b></div>
													<div class="form-group" style="margin-top: 20px;">
														任务得分:<span id="chang"></span><span class="fen">分</span>
													</div>
													<div class="form-group">
														时间得分:<span id="time"></span><span class="fen">分</span>
													</div>
													<div class="form-group">
														路段扣分:<span id="lu"></span><span class="fen">分</span>
													</div>
													<div class="form-group">
														时间:<span id="times"></span>
													</div><!--
													<div class="form-group">
														验证分:<span id="t"></span><span class="fen">待定</span>
													</div>-->
													<div class="form-group">
														总分:<span id="zongf"></span><span class="fen">分</span>
													</div>
													<div class="text-center" style="padding-bottom: 20px;">
														<button type="button" style="background: #666666;width: 150px;font-size: 14px; border: 0px; font-weight: 600; color: #fff;" class="btn btn-default" data-dismiss="modal" aria-hidden="true">
															确定
														</button>
													
													</div>
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>
                        </div>
                   </div>
                </div>
                <!-- /.row -->
            <!-- /.container-fluid -->

        </div>
	 </div>	
    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
	<!-- tab table-->
	<script src="js/cdn/jquery.dataTables.min.js"></script>
	<script src="js/cdn/dataTables.bootstrap.js"></script>
	<!-- device-->
	<script src="nuget/content/scripts/toastr.js"></script>
	<script type="text/javascript" src="js/common.js" ></script>
    <script type="text/javascript" src="js/vue/vue.js" ></script>
    <script type="text/javascript" src="js/vue/vue-router.js" ></script>
	<!--百度地图-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1e0u2fDgqYhUdilCb10Lz7xHyTBf99hG"></script>

	<!--stomp-->
	<script src="js/cdn/sockjs.min.js"></script>
	<script src="js/cdn/stomp.js"></script>
	<script>
		//
		function setH() {
            var mapNode = $(".all");
            var parh = mapNode.parent().height();
            var preh = mapNode.prev().height() + 20 + 2;
            mapNode.height(parh-preh + "px");
        }
        setH();
        $(window).resize(setH);
		//

		var  mapStyle ={ 
	        features: ["road", "building","water","land"],//隐藏地图上的poi
	        style : "normal"  //设置地图风格为高端黑
	    };
		
		var vue = new Vue({
			el: '#page-wrapper',
			data: {
				competitionDate: getQueryString("date",window.location.href), //比赛日期
				map : new BMap.Map("allmap"),    // 创建Map实例1e0u2fDgqYhUdilCb10Lz7xHyTBf99hG
				
				ak:"7WeNqOr0jtfYwU2j8vXMhahffgLuhmPS",
				service_id:149250,
				locationUrl:"http://yingyan.baidu.com/api/v3/track/gettrack?" +
				"service_id=149250&ak=7WeNqOr0jtfYwU2j8vXMhahffgLuhmPS&coord_type_output=bd09ll"+
				//"&start_time=1500566400" +
				//"&end_time=1500619528" +
				//"&entity_name=1"+
				"&process_option=need_denoise=1" +//need_denoise =0：不去噪 need_denoise =1：去噪
				",need_vacuate=1" +//need_vacuate =0：不抽稀 need_vacuate=1：抽稀
				",radius_threshold=0" +//定位精度过滤，用于过滤掉定位精度较差的轨迹点，每个轨迹点示例：radius_threshold=0：不过滤
										// radius_threshold=20：当取值大于0的整数时，则过滤掉radius大于20的轨迹点。 通常 GPS 定位精度不超过20米，Wi-Fi 定位精度不超过100米
				",need_mapmatch=0" +//need_mapmatch=0：不绑路need_mapmatch=1：绑路
				",transport_mode=driving" +//
				"&is_processed=1"+//0：关闭轨迹纠偏，返回原始轨迹
								  //1：打开轨迹纠偏，返回纠偏后轨迹。打开纠偏时，请求时间段内轨迹点数量不能超过2万，否则将返回错误。
				
				"&page_size=5000",
				teamInfo:{},
				dataObj:{},
				marker:null,
				polyline:null,
				timer :null,
				name: '1',//获取的val值
			  	options: [
			      { text: '城乡赛道', value: '1' },
			      /*{ text: '城郊赛场', value: '3' },*/
			      { text: '高架快速赛道', value: '2' }
			    ],
			    markerArr :[  
                    { title: "起点", point: "120.7839891527,31.5962688938"},  
                    { title: "1.掉头", point: "120.7834848974,31.5959764466"},  
                    { title: "2.红绿灯", point: "120.7856199358,31.5968446465"},   
                    { title: "3.红绿灯", point: "120.7875618551,31.5977676712"}, 
                    { title: "4.作业车辆", point: "120.7879266355,31.5970822577"}, 
                    { title: "5.红绿灯", point: "120.7885703657,31.5964699507"}, 
                    { title: "6.隧道", point: "120.7876691435,31.5958759177"}, 
                    { title: "7.停车让行", point: "120.7868054722,31.5952955895"}, 
                    { title: "8.停车让行", point: "120.7880124662,31.5938835947"}, 
                    { title: "9.行人", point: "120.7888815020,31.5942765792"}, 
                    { title: "10.行人", point: "120.7900860000,31.5948020000"}, 
                    { title: "11.红绿灯", point: "120.7889136885,31.5962323380"}, 
                    { title: "12.乡村道路", point: "120.7923320000,31.5951010000"}, 
                    { title: "13.施工道路", point: "120.7891068075,31.5917724170"}, 
                    { title: "14.学校路段", point: "120.7872614477,31.5935180263"}, 
                    { title: "15.施工道路", point: "120.7859847162,31.5951173777"}, 
                    { title: "16.结束", point: "120.7834210000,31.5952860000"}, 
  				],
  				markersArr:[
  					{ title: "起点", point: "120.7109580000,31.6914580000"},  
  					{ title: "1.入口匝道", point: "120.7142420000,31.6913970000"}, 
  					{ title: "2.模拟收费站", point: "120.7445770000,31.6890890000"},  
  					{ title: "3.施工路段", point: "120.7776350000,31.6898260000"},  
  					{ title: "4.故障车辆", point: "120.7470210000,31.6890890000"},
  					{ title: "5.结束", point: "120.7079260000,31.6920380000"},
  				],
			},
			
			mounted: function () {
			    var _self = this;
				// TODO update init function to socket
				/* ajax init start */
                // 初始化查询 车队信息及状态 等
                var initFuncAjax = function () {
                    $.ajax({
                        type: "get",
                        url: url +'/users/'+adminId+'/teamInfoWithReferee/'+teamId,
                        async: false,
                        dataType: 'json',
                        contentType: "application/json; charset=utf-8",
                        beforeSend: function(request) {
                            request.setRequestHeader("accessToken", accessToken);
                        },
                        success: function(data) {
                            _self.init(data);
                        }
                    });
                };
                //初始化查询 realTime
                var initRealTimeAjax = function () {
                    $.ajax({
                        url : url +'/scenesResults',
                        type : 'get',
                        data:{
                            "currentPage":1,
                            "pageSize":30,
                            "count":30,
                            "teamId":teamId
                        },
                        async: false,
                        dataType : 'json',
                        beforeSend: function(request) {
                            request.setRequestHeader("accessToken", accessToken);
                        },
                        success: function (data) {
                            sessionStorage.setItem("realTimeObjEx", JSON.stringify(data));
                            _self.realTime(data);
                        }
                    });
                };
                //初始化查询 Illegal
                var initIllegalAjax = function () {
                    $.ajax({
                        url: url + '/illegalResults',
                        type: 'get',
                        data: {
                            "currentPage": 1,
                            "pageSize": 16,
                            "count": 16,
                            "teamId":teamId
                        },
                        async: false,
                        dataType: 'json',
                        beforeSend: function (request) {
                            request.setRequestHeader("accessToken", accessToken);
                        },
                        success: function (data) {
                            sessionStorage.setItem("illegalObjEx", JSON.stringify(data));
                            _self.Illegal(data);
                        }
                    });
                };
                initRealTimeAjax(); //实时成绩
                initIllegalAjax(); //违规信息
                initFuncAjax();
				/* ajax init end */

                /* websocket stomp start */
                function connect() {
                    var socket = new SockJS(url + '/hello');
                    stompClient = Stomp.over(socket);
                    stompClient.connect({}, function (frame) {
						// realTime 实时成绩
                        stompClient.subscribe('/user/'+ teamId +'/testTeamScenesResultsocketpush', function (result) {
                            var str = sessionStorage.getItem("realTimeObjEx");
                            var data = JSON.parse(str);
                            var obj = JSON.parse(result.body);
                            data.result.unshift(obj.result);

                            sessionStorage.setItem("realTimeObjEx", JSON.stringify(data));
                            _self.realTime(data);//处理返回数据
                        });
                        // illegal 违规信息
                        stompClient.subscribe('/user/'+ teamId +'/testTeamIllegalResultsocketpush', function (result) {
                            var str = sessionStorage.getItem("illegalObjEx");
                            var data = JSON.parse(str);
                            var obj = JSON.parse(result.body);
                            data.result.unshift(obj.result);

                            sessionStorage.setItem("illegalObjEx", JSON.stringify(data));
                            _self.Illegal(data);//处理返回数据
                        });
                        stompClient.subscribe('/user/'+ teamId +'/testManualInterventionsocketpush', function (result) {
                            var str = sessionStorage.getItem("illegalObjEx");
                            var data = JSON.parse(str);
                            var obj = JSON.parse(result.body);
                            data.result.unshift(obj.result);

                            sessionStorage.setItem("illegalObjEx", JSON.stringify(data));
                            _self.Illegal(data);//处理返回数据
                        });
                        // 车队状态改变
                        stompClient.subscribe('/user/'+ teamId +'/testTeamStatesocketpush', function (result) {
                            var objStr = result.body;
                            var obj = JSON.parse(objStr);
                            _self.updateTeamState(obj.teamState);
                            if(obj.teamState == 3){
                            	$("#btn_btn").click();
                            }
                        });
                        // 裁判名称改变
                        stompClient.subscribe('/user/'+ teamId +'/testRefereeNamesocketpush', function (result) {
                            var objStr = result.body;
                            var obj = JSON.parse(objStr);

                            _self.dataObj.refereeName = obj.refereeName;
                        });
                    });

                }
                connect();
                /* websocket stomp end */
			},
			methods: {
			    showPop: function () {
                    /**  切换动画出现 */
                    $("#animate").animate({height:"50px"});
                },
				hidePop: function () {
                    /**  切换动画隐藏 */
                    $("#animate").animate({height:"0px"});
                },
				init: function (data) {
			        var _self = this;
                    if(data.code == 1){
                        _self.dataObj = {};
                        var result = data.result;
                        _self.dataObj = result;
                        _self.teamInfo=result;
                        _self.drawPoint();

//                        _self.timer = setInterval('vue.drawPoint()',1000);

                        // 更改 比赛状态
                        
                        this.updateTeamState(result.teamState);
                    }else{
                        window.location.href="404.html";
                    }
				},
				
				updateTeamState: function (teamState) {
			        var _self = this;
			        if(_self.timer){
						clearInterval(_self.timer);
					}
                    if(teamState == 1){
                        $("#anim_show").attr("src","img/ic_g_red.png");
                        $("#stup").attr("src","img/ic_end.png");
                        $("#stup").hide();
                        _self.showPop();
                    }else if(teamState == 2){
                        $("#stup").hide();
                        $("#anim_show").attr("src","img/ic_pause.png");
                       _self.timer = setInterval('vue.drawPoint()',1000);
                        _self.showPop();
                    }else if(teamState == 3){
                        $("#stup").hide();
                        $("#anim_show").attr("src","img/ic_end.png");
                        
                        _self.showPop();
                        _self.zcj();
                        
                    }else if(teamState == 4){
                        $("#stup").hide();
                        $("#anim_show").attr("src","img/ic_no_start.png");
                        _self.showPop();
                    }else{
                        $("#stup").show();
                        _self.hidePop();
                       _self.timer = setInterval('vue.drawPoint()',1000);
                        $("#stup").attr("src","img/ic_ing.png");
                    }
                    
                    
                },
				Illegal:function(result){
					var myTable = $('#Illegal').DataTable({
			            "processing": false, //DataTables载入数据时，是否显示‘进度’提示
			            "stateSave": true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
			            "scrollCollapse": true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
			            "paginationType": "full_numbers", //详细分页组，可以支持直接跳转到某页
			            "language": lang, //提示信息
			            "autoWidth": true, //自适应宽度，
			            "destroy":true,
			            "lengthMenu": [8, 30, 50],
			            "stripeClasses": ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
			            "showRowNumber": true,
			            "searching": false, //是否允许Datatables开启本地搜索
			            "paging": false, //是否开启本地分页
			            "lengthChange": false, //是否允许产品改变表格每页显示的记录数
			            "info": false, //控制是否显示表格左下角的信息
			            //跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
			            "ordering": false,
			            "deferRender": true, //延迟渲染
			            //"ajax":"json/device.json",
                        "ajax": function (data, callback, settings) {
                            if(result['code'] == 1){
                                if(result.result.length != 0){
                                    var returnData = {};
                                    returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                                    returnData.recordsTotal = result.numReturn;//返回数据全部记录
                                    returnData.recordsFiltered = result.numReturn;//后台不实现过滤功能，每次查询均视作全部结果
                                    returnData.data = result.result;//返回的数据列表
                                    //计算总分
                                    var list = result.result;
                                    var sum = 0;
                                    if(list && list.length != 0){
                                        for(var i=0; i<list.length ;i++){
                                            var sub = list[i];
                                            sum += sub.deductScore;
                                        }
                                    }
                                    $("#wgxx_zkf").html(sum);
                                    callback(returnData);
                                }else{
                                    $('#Illegal').dataTable().fnClearTable();
                                }
                            }else{
                                ifajax(result);
                            }
                        },
			            "columns": [{
			                "data":  function (obj) {
			                	var createTime = replaceHourTime(obj.createTime / 1000);
			                	if(obj.scenesType != 1){
			                		if(obj.scenesNo != null){
			                			return '<div style="font-size: 16px;">'+obj.scenesName+'：'+obj.illegalName+'</br><span style="color:red">- '+obj.deductScore+'分</span><span style="float:right">'+createTime+'</span></div>';
			                		}else{			                			
			                			return '<div style="font-size: 16px;">'+obj.illegalName+'</br><span style="color:red">- '+obj.deductScore+'分</span><span style="float:right">'+createTime+'</span></div>';
									}
			                	}else{
			                		return '<div style="font-size: 16px;">'+obj.scenesName+'：'+obj.illegalName+'</br><span style="color:red">- '+obj.deductScore+'分</span><span style="float:right">'+createTime+'</span></div>';
			                	}
			                    
			                },
			                "sTitle": "被扣分数",
			                "sDefaultContent": "",
			            }]
			        });
				},
				realTime:function(result){
			        var myTable = $('#realTime').DataTable({
			            "processing": false, //DataTables载入数据时，是否显示‘进度’提示
			            "stateSave": true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
			            "scrollCollapse": true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
			            "paginationType": "full_numbers", //详细分页组，可以支持直接跳转到某页
			            "language": lang, //提示信息
			            "autoWidth": true, //自适应宽度，
			            "lengthMenu": [8, 30, 50],
			            "stripeClasses": ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
			            "showRowNumber":true,
			            "destroy":true,
			            "searching": false, //是否允许Datatables开启本地搜索
			            "paging": false, //是否开启本地分页
			            "lengthChange": false, //是否允许产品改变表格每页显示的记录数
			            "info": false, //控制是否显示表格左下角的信息
			            //跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
			            "ordering": false,
			            "deferRender": true, //延迟渲染
			            //"ajax":"json/device.json",
                        "ajax": function (data, callback, settings) {
                            if(result['code'] == 1){
                                if(result.result.length != 0){
                                    var returnData = {};
                                    returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                                    returnData.recordsTotal = result.numReturn;//返回数据全部记录
                                    returnData.recordsFiltered = result.numReturn;//后台不实现过滤功能，每次查询均视作全部结果
                                    returnData.data = result.result;//返回的数据列表
									//计算总分
									var list = result.result;
									var sum = 0;
									if(list && list.length != 0){
									    for(var i=0; i<list.length ;i++){
									        var sub = list[i];
                                            if(sub.scenesType != 1){ // 场景
                                                sum += sub.scenesResult;
                                            }else{
                                                sum -= sub.scenesResult;
											}
										}
									}
                                    $("#sscj_zdf").html(sum);
									//渲染
                                    callback(returnData);
                                }else{
                                    $('#realTime').dataTable().fnClearTable();
                                }
                            }else{
                                console.log(result);
                                console.log("realtime data length is 0 ");
//                                ifajax(result);
                            }
                        },
			            "columns": [{
			                "data": function(obj) {
			                    var createTime = replaceHourTime(obj.createTime / 1000);
			                    var str = '';
                                str += '<div style="font-size: 16px;">';
                                str += '	<div>';
                                str += '		<span style="width:150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">' + obj.scenesName + '</span>';
                                str	+= '		<span style="float:right">'+createTime+'</span>';
                                str += '	</div>';
                                str += '	<div>';
                                str += '		<div style="display:inline-block;width: 33%;">';
                                if(obj.scenesType != 1){
									str += '总<span>' + obj.scenesScore + '</span>分';
                                }
                                str += '		</div>';
                                str += '		<div style="display:inline-block;width: 33%;text-align: center;color:red;">';
                                if(obj.scenesType != 1){
                                    str += '		扣<span>' + (obj.scenesScore - obj.scenesResult) + '</span>分';
                                }else{
                                    str += '		扣<span>' + obj.scenesResult + '</span>分';
								}
                                str += '		</div>';
                                str += '		<div style="display:inline-block;width: 30%;text-align: right;color:red;">';
                                if(obj.scenesType != 1){
                                    str += '		得<span>' + obj.scenesResult + '</span>分';
                                }else{
                                    str += '		得<span>' + (0 - obj.scenesResult) + '</span>分';
								}
                                str += '		</div>';
                                str += '	</div>';
                                str += '</div>';
                                return str;
//			                	if(obj.scenesType != 1){
//			                		if(obj.scenesNo != null){
//			                			return '<div style="font-size: 16px;">'+obj.stadiumName+'<span style="float:right; width:150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">'+'[场景'+obj.scenesNo+']'+obj.scenesName+'</span></br><span style="color:red">'+obj.scenesResult+'分</span><span style="float:right">'+createTime+'</span></div>';
//			                		}else{
//			                			return '<div style="font-size: 16px;">'+obj.stadiumName+'<span style="float:right">'+'[场景]'+obj.scenesName+'</span></br><span style="color:red">'+obj.scenesResult+'分</span><span style="float:right">'+createTime+'</span></div>';
//			                		}
//								}else{
//			                		return '<div style="font-size: 16px;">'+obj.stadiumName+'<span style="float:right">'+'[路段]'+obj.scenesName+'</span></br><span style="color:red">-'+obj.scenesResult+'分</span><span style="float:right">'+createTime+'</span></div>';
//			                	}
			                },
			                "sTitle": "实时时间", //标题
			                "sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
			            }]
			        });
				},
				point:function(){
					for (var i = 0; i < vue.markerArr.length; i++) {  
	                    var p0 = vue.markerArr[i].point.split(",")[0]; //  
	                    var p1 = vue.markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来  
	                    
	                    switch(i){
	                    	case 0:
	                    	myIcon = new BMap.Icon("img/icon/qi.png", new BMap.Size(19,27));
	                    	break;
	                    	case 1:
	                    	myIcon = new BMap.Icon("img/icon/ic_1.png", new BMap.Size(19,27));
	                    	break;
	                    	case 2:
	                    	myIcon = new BMap.Icon("img/icon/ic_2.png", new BMap.Size(19,27));
	                    	break;
	                    	case 3:
	                    	myIcon = new BMap.Icon("img/icon/ic_3.png", new BMap.Size(19,27));
	                    	break;
	                    	case 4:
	                    	myIcon = new BMap.Icon("img/icon/ic_4.png", new BMap.Size(19,27));
	                    	break;
	                    	case 5:
	                    	myIcon = new BMap.Icon("img/icon/ic_5.png", new BMap.Size(19,27));
	                    	break;
	                    	case 6:
	                    	myIcon = new BMap.Icon("img/icon/ic_6.png", new BMap.Size(19,27));
	                    	break;
	                    	case 7:
	                    	myIcon = new BMap.Icon("img/icon/ic_7.png", new BMap.Size(19,27));
	                    	break;
	                    	case 8:
	                    	myIcon = new BMap.Icon("img/icon/ic_8.png", new BMap.Size(19,27));
	                    	break;
	                    	case 9:
	                    	myIcon = new BMap.Icon("img/icon/ic_9.png", new BMap.Size(19,27));
	                    	break;
	                    	case 10:
	                    	myIcon = new BMap.Icon("img/icon/ic_10.png", new BMap.Size(19,27));
	                    	break;
	                    	case 11:
	                    	myIcon = new BMap.Icon("img/icon/ic_11.png", new BMap.Size(19,27));
	                    	break;
	                    	case 12:
	                    	myIcon = new BMap.Icon("img/icon/ic_12.png", new BMap.Size(19,27));
	                    	break;
	                    	case 13:
	                    	myIcon = new BMap.Icon("img/icon/ic_13.png", new BMap.Size(19,27));
	                    	break;
	                    	case 14:
	                    	myIcon = new BMap.Icon("img/icon/ic_13.png", new BMap.Size(19,27));
	                    	break;
	                    	case 15:
	                    	myIcon = new BMap.Icon("img/icon/ic_13.png", new BMap.Size(19,27));
	                    	break;
	                    	case 16:
	                    	myIcon = new BMap.Icon("img/icon/zd.png", new BMap.Size(19,27));
	                    	break;
	                    	case 17:
	                    	myIcon = new BMap.Icon("img/icon/zd.png", new BMap.Size(19,27));
	                    	break;
	                    }
	                    point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
	                    marker[i] = new window.BMap.Marker(point[i],{icon:myIcon}); //按照地图点坐标生成标记  
	                    map.addOverlay(marker[i]);  
	                    
	                } 
				},
				drawPoint:function () {
					_self=this;
					var startTime;
					var endTime;
					var todayStamp=new Date(replaceDate()).getTime()/1000;
					if(this.competitionDate==null){
						startTime=todayStamp;
						endTime=parseInt(new Date().getTime()/1000);//当前时间
					}else {
						var competitionDateStamp=new Date(this.competitionDate).getTime()/1000;
						startTime=competitionDateStamp;//比赛日零点
						endTime=competitionDateStamp+60*60*24-1;//比赛日24点
					}
					$.ajax({
						type:'get',
						url:this.locationUrl+"&entity_name="+this.teamInfo.teamId+"&start_time="+startTime+"&end_time="+endTime,
						dataType:'jsonp',
						async:true,
						processData: false,
						success:function(data){
							if(data.status==0){
								map.removeOverlay(_self.marker);
								map.removeOverlay(_self.polyline);
								var points=data.points;
								var polyPoints=[];
								for(var i=0;i<points.length;i++){
									polyPoints.push(new BMap.Point(points[i].longitude, points[i].latitude));
								}

								var polylineOptions = {
                                    strokeColor:"blue",
									strokeWeight:6,
									strokeOpacity:0.5
								};
								_self.polyline = new BMap.Polyline(polyPoints, polylineOptions);   //创建折线
                                new BMap.IconSequence();
								map.addOverlay(_self.polyline);   //增加折线
								var endPoint=points.pop();
								var startPoint=data.start_point;
								if(!endPoint || !startPoint){
								    return;
								}
								var longitude=endPoint.longitude;
								var latitude=endPoint.latitude;
								var direction=endPoint.direction;
								var modify_time=endPoint.create_time;
								var centerLongitude=(startPoint.longitude+endPoint.longitude)/2;
								var centerLatitude=(startPoint.latitude+endPoint.latitude)/2;
								var d1 = new Date(modify_time);
								var d2 = new Date();
								var time=parseInt(d2 - d1) / 1000;//两个时间相差的秒数
								var deviceState;
								if(time<(60*10)){
									deviceState=1;
								}else{
									deviceState=0;
								}
//								var myIcon= new BMap.Icon((deviceState==1)?("img/car_online.png"):("img/car.png"), new BMap.Size(41,34));
								var myIcon= new BMap.Icon("img/car.png", new BMap.Size(41,34));
								var point = new BMap.Point(longitude,latitude);
								var opts = {
									width : 200,     // 信息窗口宽度
									height: 100,     // 信息窗口高度
									title : "车辆信息" , // 信息窗口标题
									enableMessage:true,//设置允许信息窗发送短息
									message:"提示信息"
								}
								if(!_self.marker)
									map.centerAndZoom(new BMap.Point(120.7884201620,31.5953184371), 17); // 初始化地图,设置中心点坐标和地图级别
									var pt = new BMap.Point(longitude, latitude);
								_self.marker = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
								_self.marker.addEventListener("click", function(){
									var infoWindow = new BMap.InfoWindow("车队名称:"+_self.teamInfo.teamName+",上传时间："+modify_time+",行驶距离"+parseInt(data.distance)+"米");
									map.openInfoWindow(infoWindow,point); //开启信息窗口
								});
								_self.marker.setRotation(direction);
								map.addOverlay(_self.marker);
							}else{}
						},
					});
				},
				changeChNo: function(name) {
					this.name = name;
					this.drawLine();
					this.zcj();
				},
				drawLine:function(){
					var stadiumId = this.name;
					console.log(stadiumId);
					if( stadiumId == '1'){
						$.ajax({
				  			type: "get",
				  			url:url+'/users/'+adminId+'/stadium/'+stadiumId+'/postion',
				  			async: false,
				  			dataType: 'json',
				  			beforeSend: function(request) {
								request.setRequestHeader("accessToken", accessToken);
							},
							success: function(data) {
								/*if(data.code != 0){
									map = new BMap.Map("allmap", {mapType:BMAP_SATELLITE_MAP});    // 创建Map实例
									map.setMapStyle(mapStyle);
									map.centerAndZoom(new BMap.Point(data.result.lng, data.result.lat,), 17);  // 初始化地图,设置中心点坐标和地图级别
									map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
									map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
									vue.drawPoint();
								}*/
								if(data.code != 0){
									map = new BMap.Map("allmap", {mapType:BMAP_SATELLITE_MAP});    // 创建Map实例
									map.setMapStyle(mapStyle);
									map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
									vue.drawPoint();
				                    var point = new BMap.Point(data.result.lng, data.result.lat,); //地图中心点，广州市  
				                    map.centerAndZoom(point, 17); // 初始化地图,设置中心点坐标和地图级别。  
				                    map.enableScrollWheelZoom(true); //启用滚轮放大缩小  
				                    var myIcon= new BMap.Icon("img/icon/1.png", new BMap.Size(41,34));
				                    var point = new Array(); //存放标注点经纬信息的数组  
				                    var marker = new Array(); //存放标注点对象的数组  
				                    var info = new Array(); //存放提示信息窗口对象的数组  
				                   	vue.point();
				                     
								}
							}
				  		});
					}else{
						$.ajax({
				  			type: "get",
				  			url:url+'/users/'+adminId+'/stadium/'+stadiumId+'/postion',
				  			async: false,
				  			dataType: 'json',
				  			beforeSend: function(request) {
								request.setRequestHeader("accessToken", accessToken);
							},
							success: function(data) {
								/*if(data.code != 0){
									map = new BMap.Map("allmap");// 创建Map实例
									map.setMapStyle(mapStyle);
									map.centerAndZoom(new BMap.Point(data.result.lng, data.result.lat,), 14);  // 初始化地图,设置中心点坐标和地图级别
									map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
									map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
									vue.drawPoint();
								}*/
								if(data.code != 0){
									
									map = new BMap.Map("allmap");// 创建Map实例
									map.setMapStyle(mapStyle);
									//map.centerAndZoom(new BMap.Point(data.result.lng, data.result.lat,), 14);  // 初始化地图,设置中心点坐标和地图级别
									map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
									//map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
									vue.drawPoint();
									var point = new BMap.Point(data.result.lng, data.result.lat,); //地图中心点，广州市  
				                    map.centerAndZoom(point, 14); // 初始化地图,设置中心点坐标和地图级别。  
				                    map.enableScrollWheelZoom(true); //启用滚轮放大缩小  
				                    var point = new Array(); //存放标注点经纬信息的数组  
				                    var marker = new Array(); //存放标注点对象的数组  
				                    var info = new Array(); //存放提示信息窗口对象的数组  
				                    for (var i = 0; i < vue.markersArr.length; i++) {  
				                        var p0 = vue.markersArr[i].point.split(",")[0]; //  
				                        var p1 = vue.markersArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来  
				                        switch(i){
				                        	case 0:
				                        	myIcon = new BMap.Icon("img/icon/qi.png", new BMap.Size(19,27));
				                        	break;
				                        	case 1:
				                        	myIcon = new BMap.Icon("img/icon/ic_1.png", new BMap.Size(19,27));
				                        	break;
				                        	case 2:
				                        	myIcon = new BMap.Icon("img/icon/ic_2.png", new BMap.Size(19,27));
				                        	break;
				                        	case 3:
				                        	myIcon = new BMap.Icon("img/icon/ic_3.png", new BMap.Size(19,27));
				                        	break;
				                        	case 4:
				                        	myIcon = new BMap.Icon("img/icon/ic_4.png", new BMap.Size(19,27));
				                        	break;
				                        	case 5:
				                        	myIcon = new BMap.Icon("img/icon/zd.png", new BMap.Size(19,27));
				                        	break;
				                        	case 6:
				                        	myIcon = new BMap.Icon("img/icon/ic_6.png", new BMap.Size(19,27));
				                        	break;
				                        	
				                        	case 9:
				                        	myIcon = new BMap.Icon("img/icon/zd.png", new BMap.Size(19,27));
				                        	break;
				                        	default:
				                        	myIcon= new BMap.Icon("img/icon/1.png", new BMap.Size(41,34));
				                        	break;
				                        }
				                        point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
				                        marker[i] = new window.BMap.Marker(point[i],{icon:myIcon}); //按照地图点坐标生成标记
				                        map.addOverlay(marker[i]);  
				                        
				                    }  
				                    vue.zcj();
								}
							}
				  		});
					}
					
				},
				zcj:function(){
					var stadiumId = this.name;
					$.ajax({
                        url: url + '/users/1/teams/'+teamId+'/stadium/stadiumResult',
                        type: 'get',
                        data:{
                        	stadiumId:stadiumId,
                        },
                        async: false,
                        dataType: 'json',
                        beforeSend: function (request) {
                            request.setRequestHeader("accessToken", accessToken);
                        },
                        success: function (data) {
                           console.log(data.result);
                           $("#chang").text(data.result.scenesScore);
                           var i = data.result.roadScore;
	                		if(data.result.roadScore<0){
	                			i = -data.result.roadScore;
	                		}
                            $("#lu").text(i);
                            $("#time").text(data.result.timeScore);
                            var match = formatSeconds(data.result.matchTime);
                            $("#times").text(match);
                            $("#zongf").text(data.result.totalScore);
                        }
                    });
				},
			}
		});
		/*var map = new BMap.Map("allmap", {mapType:BMAP_SATELLITE_MAP});    // 创建Map实例
		map.setMapStyle(mapStyle);
		map.centerAndZoom(new BMap.Point(120.7881841276, 31.5942857184), 17);  // 初始化地图,设置中心点坐标和地图级别
		map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
		map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放*/
		
		map = new BMap.Map("allmap", {mapType:BMAP_SATELLITE_MAP});    // 创建Map实例
		map.setMapStyle(mapStyle);
		map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        var point = new BMap.Point(120.7881841276, 31.5942857184); //地图中心点，广州市  
        map.centerAndZoom(point, 17); // 初始化地图,设置中心点坐标和地图级别。  
        map.enableScrollWheelZoom(true); //启用滚轮放大缩小  
        
        var myIcon= new BMap.Icon("img/icon/1.png", new BMap.Size(41,34));
        var point = new Array(); //存放标注点经纬信息的数组  
        var marker = new Array(); //存放标注点对象的数组  
        var info = new Array(); //存放提示信息窗口对象的数组  
        vue.point();
        
		
		
		
		
	</script>
</body>

</html>
